<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">

<head th:include="include :: header"></head>

<body class="gray-bg">
<input type="hidden" th:value="${user.userId}" />
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header">
                    <h5>个人资料</h5>
                </div>
                <div class="ibox-content">
                    <div class="text-center">
                        <p><img class="img-circle img-lg" height="128" width="128" th:src="@{${user.avatar}}"></p>
                        <p><a href="javascript:avatar()">修改头像</a></p>
                    </div>
                    <ul class="list-group list-group-striped">
                        <li class="list-group-item"><i class="fa fa-id-badge"></i>
                            <b class="font-noraml">登录账号：</b>
                            <p class="pull-right">[[${user.username}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-user"></i>
                            <b class="font-noraml">用户名称：</b>
                            <p class="pull-right">[[${user.realname}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-user"></i>
                            <b class="font-noraml">性别：</b>
                            <p class="pull-right" th:switch="${user.sex}">
                                <span th:case="'1'">男</span>
                                <span th:case="'0'">女</span>
                                <span th:case="*">未填写</span>
                            </p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-phone"></i>
                            <b  class="font-noraml">手机号码：</b>
                            <p class="pull-right">[[${user.phone}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-envelope-o"></i>
                            <b  class="font-noraml">邮箱地址：</b>
                            <p class="pull-right" >[[${user.email}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-calendar"></i>
                            <b  class="font-noraml">创建时间：</b>
                            <p class="pull-right" >[[${#dates.format(user.ctime, 'yyyy-MM-dd')}]]</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-sm-9" style="padding-left: 0px">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header">
                    <h5>系统资料</h5>
                </div>
                <div class="ibox-content">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#user_info" data-toggle="tab" aria-expanded="true">基本资料</a></li>
                            <li><a href="#modify_password" data-toggle="tab" aria-expanded="false">修改密码</a></li>
                            <li><a href="#userRole" data-toggle="tab" aria-expanded="false" onclick="getUserRole()">角色资源</a></li>
                        </ul>
                        <div class="tab-content" style="margin-top: 15px">
                            <!--用户信息-->
                            <div class="tab-pane active" id="user_info" th:object="${user}">
                                <form class="form-horizontal" id="form-user-edit">
                                    <!--隐藏ID-->
                                    <input name="userId" id="userId" class="form-control" type="hidden" th:field="*{userId}">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">用户名称：</label>
                                        <div class="col-sm-10">
                                            <input type="text" autocomplete="off" class="form-control" id="realname" name="realname" th:field="*{realname}" placeholder="请输入用户名称">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">手机号码：</label>
                                        <div class="col-sm-10">
                                            <input type="text" autocomplete="off" class="form-control" id="phone" name="phone" maxlength="11" th:field="*{phone}" placeholder="请输入手机号码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">邮箱：</label>
                                        <div class="col-sm-10">
                                            <input type="email" autocomplete="off" class="form-control" id="email" name="email" th:field="*{email}" placeholder="请输入邮箱">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">性别：</label>
                                        <div class="col-sm-10">
                                            <label class="radio-inline">
                                                <input th:field="*{sex}" type="radio" name="sex" value="1" /> 男
                                            </label>
                                            <label class="radio-inline">
                                                <input th:field="*{sex}" type="radio" name="sex" value="0" /> 女
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" class="btn btn-sm btn-primary" onclick="submitUserInfo()">
                                                <i class="fa fa-check"></i>保 存
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <!--修改密码-->
                            <div class="tab-pane" id="modify_password">
                                <form class="form-horizontal" id="form-user-resetPwd">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">旧密码：</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" name="oldPassword" placeholder="请输入旧密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">新密码：</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="请输入新密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">确认密码：</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" name="confirmPassword" placeholder="请确认密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="submitChangPassword()"><i class="fa fa-check"></i>保 存</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane" id="userRole">
                                <table id="exampleTable" data-mobile-responsive="true"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<div th:include="include :: footer"></div>
<script src="../../../static/js/plugins/validate/jquery.validate.extend.js"
        th:src="@{/js/plugins/validate/jquery.validate.extend.js}"></script>
<script type="text/javascript" src="../../../static/js/appjs/system/upmsUser/personal.js"
        th:src="@{/js/appjs/system/upmsUser/personal.js}"></script>
</body>
</html>
